<template>
  <div class="response-headers">
    <el-table :data="headersList" style="width: 100%">
      <el-table-column prop="key" label="响应头" width="200" />
      <el-table-column prop="value" label="值">
        <template slot-scope="scope">
          <span class="header-value">{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="copyHeader(scope.row)"
          >
            复制
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ResponseHeaders',
  props: {
    headers: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    headersList() {
      return Object.entries(this.headers).map(([key, value]) => ({
        key,
        value: Array.isArray(value) ? value.join(', ') : value
      }))
    }
  },
  methods: {
    copyHeader(header) {
      const text = `${header.key}: ${header.value}`
      navigator.clipboard.writeText(text).then(() => {
        this.$message.success('已复制到剪贴板')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.response-headers {
  .header-value {
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
  }
}
</style>